<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="${ctxPath}/js/jquery-1.9.1.min.js"></script>
    <script src="${ctxPath}/js/DatePicker_ui_jquery.ui.core.js"></script>
    <script src="${ctxPath}/js/DatePicker_ui_jquery.ui.datepicker.js"></script>
    <script src="${ctxPath}/js/DatePicker_ui_jquery.ui.widget.js"></script>
    <script src="${ctxPath}/js/jquery.ui.datepicker.js"></script>
    <script src="${ctxPath}/js/select2.js"></script>
    <script type="text/javascript">
        var objectAirport = {};
        $(document).ready(function (e) {

            $.ajax({
                url: 'https://www.vietjetair.com/AirportList.aspx?lang=zh-CN',
                type: 'GET',
                dataType: 'json',
                success: function (json) {
                    objectAirport = json;
                    json = json.AirportList;
                    $.each(json, function (index) {
                        var optgroup = $('<optgroup>');
                        optgroup.attr('label', json[index].CountryName);
                        $.each(json[index].List, function (i) {
                            var option = $("<option></option>");
                            option.val(json[index].List[i].Code);
                            option.text(json[index].List[i].Name + " (" + json[index].List[i].Code + ")");

                            optgroup.append(option);
                        });
                        $("#selectOrigin").append(optgroup);
                    });
                    $('#selectOrigin').val('');
                    $("#selectOrigin").select2();
                }
            });
        });
        function ValidData() {
            if (document.getElementById("ctl00_UcRightV31_CbbOrigin").value == "-1") {

                var SelectOrigin = "Hay cho diem khoi hanh";
                alert(SelectOrigin);
                document.getElementById("ctl00_UcRightV31_CbbOrigin").focus();
                return false;
            }
            if (document.getElementById("ctl00_UcRightV31_CbbDepart").value == "-1") {
                var SelectDepartment = '请选择到达点!';
                alert(SelectDepartment);
                //alert("Hãy chọn điểm đến!");
                document.getElementById("ctl00_UcRightV31_CbbDepart").focus();
                return false;
            }


        }
        $(document).ready(function () {
            $('#selectOrigin').change(function () {
                $('.selectedValOrigin').val($("#selectOrigin").val());
                $('.selectedValDestination').val($("#selectDestination").val());
                $('#selectDestination').empty().append('<option value="">到达日</option>');
                var originCode = $('#selectOrigin').val();
                var jsonlist = objectAirport.Pair;
                $.each(jsonlist, function (_i, _value) {
                    var arrival = _value.ArrivalAirports.AirportList;
                    if (_value.DepartureAirport.Code == originCode) {
                        $.each(arrival, function (index) {
                            var optgroup = $('<optgroup>');
                            optgroup.attr('label', arrival[index].CountryName);
                            var count = 0;
                            $.each(arrival[index].List, function (i) {
                                var option = $("<option></option>");
                                option.val(arrival[index].List[i].Code);
                                option.text(arrival[index].List[i].Name + " (" + arrival[index].List[i].Code + ")");
                                optgroup.append(option);
                                count ++;
                            });
                            if (count != 0)
                                $("#selectDestination").append(optgroup);
                            $("#selectDestination").select2();
                        });
                    }

                });
            });
            $("#selectDestination").change(function () {
                $('.selectedValOrigin').val($("#selectOrigin").val());
                $('.selectedValDestination').val($("#selectDestination").val());
            });
        });
        $(function () {
            var dates = $("#ctl00_UcRightV31_TxtDepartDate, #ctl00_UcRightV31_TxtReturnDate").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                changeYear: false,
                numberOfMonths: 1,
                onSelect: function (selectedDate) {
                    var option = this.id == "ctl00_UcRightV31_TxtDepartDate" ? "minDate" : "maxDate",
                        instance = $(this).data("datepicker"),
                        date = $.datepicker.parseDate(
                            instance.settings.dateFormat ||
                            $.datepicker._defaults.dateFormat,
                            selectedDate, instance.settings);
                    dates.not(this).datepicker("option", option, date);
                }
            });
        });
        $('#selectOrigin').change(function () {
            $('.selectedValOrigin').val($("#selectOrigin").val());
            $('.selectedValDestination').val($("#selectDestination").val());
            $('#selectDestination').empty().append('<option value="">到达日</option>');
            var originCode = $('#selectOrigin').val();
            var jsonlist = objectAirport.Pair;
            $.each(jsonlist, function (_i, _value) {
                var arrival = _value.ArrivalAirports.AirportList;
                if (_value.DepartureAirport.Code == originCode) {
                    $.each(arrival, function (index) {
                        var optgroup = $('<optgroup>');
                        optgroup.attr('label', arrival[index].CountryName);
                        var count = 0;
                        $.each(arrival[index].List, function (i) {
                            var option = $("<option></option>");
                            option.val(arrival[index].List[i].Code);
                            option.text(arrival[index].List[i].Name + " (" + arrival[index].List[i].Code + ")");
                            optgroup.append(option);
                            count ++;
                        });
                        if (count != 0)
                            $("#selectDestination").append(optgroup);
                        $("#selectDestination").select2();
                    });
                }

            });
        });
        $("#selectDestination").change(function () {
            $('.selectedValOrigin').val($("#selectOrigin").val());
            $('.selectedValDestination').val($("#selectDestination").val());
        });
        $("#adult").change(function () {

        })

        function getUser() {
            $.post("/getUser",function (data) {
                $("#userAccountNumber").text(data);
            })
        }
    </script>
    <link rel="stylesheet" href="${ctxPath}/bootstrap/css/bootstrap.css">
    <style>
        .form-group{
            width: 200px;
        }
    </style>

</head>
<body>

    <form action="/check" method="get" class="form-horizontal text-center">
        <table class="table" style="margin: 0 auto; width: 500px;">
            <tr>
                <td>
                    <div class="col-sm-10">
                        <label for="RbOneWay">单程</label>
                        <input id="RbOneWay" type="radio" name="trip" value="1" checked>
                    </div>
                </td>
                <td><button type="button" onclick="getUser()" class="btn-block">获取用户账号</button></td>
                <td>
                    <div class="col-sm-10">
                        <label for="RbRoundTrip" >返回</label>
                        <input id="RbRoundTrip" type="radio" name="trip" value="2" >
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-group">
                        <div class="col-sm-10">
                            <label for="selectOrigin">出发点</label>
                            <select id="selectOrigin" name="selectOrigin" multiple class="form-control">
                                <option value="" data-select2-id="2">出发点</option>
                            </select>
                        </div>
                    </div>
                </td>
                <td><textarea class="input-group" id="userAccountNumber" style="width: 128px"></textarea></td>
                <td>
                    <div class="form-group">
                        <div class="col-sm-10">
                            <label for="selectDestination">到达点</label>
                            <select id="selectDestination" name="selectDestination" multiple class="form-control">
                                <option value="">到达点</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-group">
                        <div class="col-sm-10">
                            <label for="txtDepartDateMonth">出发日期</label>
                            <select id="txtDepartDateMonth" name="txtDepartDateMonth"  class="form-control">
                                <option value="01">1</option>
                                <option value="02">2</option>
                                <option value="03">3</option>
                                <option value="04">4</option>
                                <option value="05">5</option>
                                <option value="06">6</option>
                                <option value="07">7</option>
                                <option value="08">8</option>
                                <option value="09" selected="selected">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option></select>
                            <select name="txtDepartDateDay"  class="form-control">
                                <option value="01">1</option>
                                <option value="02">2</option>
                                <option value="03">3</option>
                                <option value="04" selected="selected">4</option>
                                <option value="05">5</option>
                                <option value="06">6</option>
                                <option value="07">7</option>
                                <option value="08">8</option>
                                <option value="09">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>
                            </select>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        <div class="col-sm-10">
                            <label for="currency">币种</label>
                            <select name="currency" id="currency"  class="form-control">
                                <option value="USD">USD</option>
                                <option value="VND">VND</option>
                                <option value="THB">THB</option>
                                <option value="SGD">SGD</option>
                                <option value="TWD">TWD</option>
                                <option value="KRW">KRW</option>
                                <option value="MYR">MYR</option>
                                <option value="HKD">HKD</option>
                                <option value="CNY">CNY</option>
                                <option value="JPY">JPY</option>
                                <option value="INR">INR</option>
                                <option value="KHR">KHR</option>
                            </select>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        <div class="col-sm-10">
                            <label for="txtReturnDateMonth">回来日期</label>
                            <select id="txtReturnDateMonth" name="txtReturnDateMonth"  class="form-control">
                                <option value="01">1</option>
                                <option value="02">2</option>
                                <option value="03">3</option>
                                <option value="04">4</option>
                                <option value="05">5</option>
                                <option value="06">6</option>
                                <option value="07">7</option>
                                <option value="08">8</option>
                                <option value="09" selected="selected">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option></select>
                            <select name="txtReturnDateDay"  class="form-control">
                                <option value="01">1</option>
                                <option value="02">2</option>
                                <option value="03">3</option>
                                <option value="04">4</option>
                                <option value="05">5</option>
                                <option value="06">6</option>
                                <option value="07" selected="selected">7</option>
                                <option value="08">8</option>
                                <option value="09">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>
                            </select>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-group" style="padding-right: 25px;">
                        <label for="adult">大人</label>
                        <input type="text" id="adult" name="adult" value="1" class="form-control">
                    </div>
                </td>
                <td>
                    <div class="form-group" style="padding-right: 25px;">
                        <label for="child">儿童</label>
                        <input name="child" type="text" id="child" class="form-control" value="0">
                    </div>
                </td>
                <td>
                    <div class="form-group" style="padding-right: 25px;">
                        <label for="infants">婴儿</label>
                        <input name="infants" id="infants" type="text" value="0" class="form-control">
                    </div>
                </td>
            </tr>
        </table>
        <input type="submit" name="ctl00$UcRightV31$BtSearch" value="查找航班"  class="form-control">
        <table  style="margin: 0 auto; width: 500px;">
            <tr>
                <td>
                        <div class="form-group">
                            <label for="surname">姓</label>
                            <input type="text" class="form-control" id="surname" name="surname" placeholder="Jane Doe">
                        </div>
                </td>
                <td>
                        <div class="form-group">
                            <label for="reputation">名</label>
                            <input type="text" class="form-control" id="reputation" name="reputation">
                        </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-group">
                        <label for="sex">男女</label>
                        <select id="sex" name="sex">
                            <option value="nan">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        <label for="mail">Email</label>
                        <input type="email" class="form-control" id="mail" name="mail">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-group">
                        <label for="address">地址</label>
                        <input type="text" class="form-control" id="address" name="address">
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        <label for="city">城市</label>
                        <input type="text" class="form-control" id="city" name="city">
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>